<template>
  <el-col :span="span || 6">
    <el-form-item
      :label="label"
      :label-width="labelwidth || '120px'"
      :prop="prop"
      :class="searchFrom ? 'searchFrom' : ''"
    >
      <el-select
        size="small"
        :value="getSelectVal"
        :disabled="disabled"
        :multiple="multiple"
        :clearable="clearable"
        :filterable="filterable"
        :placeholder="phTxt"
        allow-create
        @change="onSelect"
        :style="{ width: selectWidth }"
      >
        <el-option
          v-for="{ label, value } in optionsArr"
          :label="label"
          :value="value"
          :key="value"
        />
      </el-select>
    </el-form-item>
  </el-col>
</template>

<script>
export default {
  name: "BaseFormSelect",
  props: {
    ph: {
      type: String, // 输入框占位文本
    },
    span: {
      type: Number,//col
    },
    prop: {
      type: String, //表单，在使用 validate、resetFields 方法的情况下，该属性是必填的
    },
    label: {
      type: String, //标签文本
    },
    multiple: {
      type: Boolean, // 多选
    },
    disabled: {
      type: Boolean, // 禁用
    },
    options: {
      type: Array, // Option 组件列表
    },
    showAllSelect: {
      type: Boolean, // 全部
    },
    clearable: {
      type: Boolean,
      default: true,  //是否可以清空选项
    },
    filterable: {
      type: Boolean,
      default: false,//是否可搜索
    },
    searchFrom: {
      type: Boolean, // 是否是搜索
    },
    labelwidth: {
      type: String,
      default: "120px",//标签文本宽度
    },
    selectWidth: {
      type: String,
      default: "100%", // 下拉宽度
    },
  },
  data() {
    return {
      value: "",
    };
  },
  computed: {
    phTxt() {
      const { ph, label } = this;
      return `请选择${ph || label}`;
    },
    optionsArr() {
      return this.showAllSelect
        ? [{ label: "全部", value: -1 }, ...this.options]
        : this.options;
    },
    getSelectVal() {
      const value = this.value;
      if (typeof value === "boolean") {
        return value ? 1 : 0;
      }
      if (typeof value !== "number") return value || undefined;

      return value;
    },
  },
  methods: {
    onSelect(val) {
      this.value = val
      this.$emit("input", val);
    },
  },
};
</script>

<style lang="scss">
.searchFrom {
  display: flex !important;
  .el-form-item__label-wrap {
    flex: 0 0 4.3em;
  }
}
</style>
